<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-box">
      <el-form :inline="true" size="small">
        <el-form-item label="排口名称：">
          <el-input v-model="queryParams.segmentName" placeholder="请输入排口名称"></el-input>
        </el-form-item>

        <el-form-item label="污染因子：">
          <el-select v-model="queryParams.itemCode" filterable clearable placeholder="请选择污染因子">
            <el-option v-for="item in pollutantList" :label="item.pollutantName" :value="item.pollutantCode"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="预警类型：">
          <el-select v-model="queryParams.warnType" placeholder="" multiple  :size ="'mini'">
              <el-option v-for="item in warnTypeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <tabDate :tabs="dateTypeTabs" ref="tabDateRef" :type="'list'"></tabDate>
          <!-- <el-select v-model="queryParams.dateType" style="width: 80px;" @change="dateTypeChange" placeholder=" ">
              <el-option v-for="item in dateTypeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
          </el-select> -->
          <!-- <el-button-group>
            <el-button v-for="item in dateTypeList" :type="queryParams.dateType = item.value ? 'primary' : ''" @click="dateTypeChange(item)">按天</el-button>
          </el-button-group> -->
        </el-form-item>

        <!-- <el-form-item>
          <el-date-picker
            style="width: 250px;"
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item> -->
<!-- 
        <el-form-item label="预警状态：">
          <el-radio-group v-model="queryParams.status">
            <el-radio label="未处理"></el-radio>
            <el-radio label="处理中"></el-radio>
            <el-radio label="已处理"></el-radio>
            <el-radio label="已关闭"></el-radio>
          </el-radio-group>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
          <!-- <el-button @click="exportData">导出</el-button> -->
        </el-form-item>
      </el-form>
      <!-- 顶部标签页 -->
      <!-- <el-tabs v-model="queryParams.warnType" type="card" @tab-click="handleTabClick">
        <el-tab-pane v-for="item in warnTypeList" :label="item.label" :name="item.value"></el-tab-pane>
      </el-tabs> -->
    </div>

    <!-- 表格区域 -->
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" border v-loading="loading">
        <el-table-column prop="segmentname" label="排口名称" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.segmentname }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="warnTypeName" label="预警类型" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.warnTypeName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="warntime" label="预警时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.warntime }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="itemname" label="监测因子" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.itemname }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="warnmessage" label="预警信息" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.warnmessage }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="controlSuggestions" label="管控建议" min-width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <div >{{ row.controlSuggestions }}</div>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="status" label="预警状态" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="processNode" label="处置节点" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.processNode }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="processStatus" label="处置情况" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.processStatus }}</span>
          </template>
        </el-table-column> -->

        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="viewProcess(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible" width="80%" center append-to-body>
        <el-table :data="detailData" border style="width: 100%">
          <el-table-column  prop="id" label="id"></el-table-column>
          <el-table-column  prop="segmentname" label="排口名称"></el-table-column>
          <el-table-column  prop="warntype" label="预警类型"></el-table-column>
          <el-table-column  prop="warnTypeName" label="预警类型名称"></el-table-column>
          <el-table-column  prop="warnlevel" label="预警级别"></el-table-column>
          <el-table-column  prop="warnLevelName" label="预警级别名称"></el-table-column>
          <el-table-column  prop="itemid" label="报警因子id"></el-table-column>
          <el-table-column  prop="itemname" label="报警因子名称"></el-table-column>
          <el-table-column  prop="sampletime" label="监测时间"></el-table-column>
          <el-table-column  prop="monitoredvalue" label="监测值"></el-table-column>
          <el-table-column  prop="warntime" label="预警时间"></el-table-column>
          <el-table-column  prop="warnbegintime" label="预警开始时间"></el-table-column>
          <el-table-column  prop="warncategory" label="警告类别"></el-table-column>
          <el-table-column  prop="warnmessage" label="预警信息" width="200"></el-table-column>
          <el-table-column  prop="updateTime" label="更新时间"></el-table-column>
          <el-table-column  prop="updateBy" label="更新人"></el-table-column>
          <el-table-column  prop="disposalprocedure" label="处置程序"></el-table-column>
          <el-table-column prop="processingstate" label="预警状态">
            <template #default="{ row }">
              <span>{{processingstateMap[row.processingstate]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
    </el-dialog> -->
    <el-dialog title="预警详情" :visible.sync="dialogVisible" width="70%" center append-to-body>
        <el-form label-width="120px" size="small">
          <div v-if="detailData && detailData.length > 0">
          <el-row>
            <el-col :span="12">
              <el-form-item label="预警ID：">
                <span style="margin-left: 10px;">{{ detailData[0].id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排口名称：">
                <span style="margin-left: 10px;">{{ detailData[0].segmentname }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预警类型：">
                <span style="margin-left: 10px;">{{ detailData[0].warnTypeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警级别：">
                <el-tag size="small" v-if="detailData[0].warnLevelName">
                  {{ detailData[0].warnLevelName }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="报警因子：">
                <span style="margin-left: 10px;">{{ detailData[0].itemname }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监测值：">
                <span style="margin-left: 10px;">{{ detailData[0].monitoredvalue }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="监测时间：">
                <span style="margin-left: 10px;">{{ detailData[0].sampletime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警时间：">
                <span style="margin-left: 10px;">{{ detailData[0].warntime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预警开始时间：">
                <span style="margin-left: 10px;">{{ detailData[0].warnbegintime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="警告类别：">
                <span style="margin-left: 10px;">{{ detailData[0].warncategory }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="预警信息：">
                <div style="margin-left: 10px; padding: 8px; border: 1px solid #E4E7ED; border-radius: 4px; background-color: #F5F7FA; min-height: 100px;">{{ detailData[0].warnmessage }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="更新时间：">
                <span style="margin-left: 10px;">{{ detailData[0].updateTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新人：">
                <span style="margin-left: 10px;">{{ detailData[0].updateBy }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处置程序：">
                <span style="margin-left: 10px;">{{ detailData[0].disposalprocedure }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警状态：">
                <span style="margin-left: 10px;">{{ processingstateMap[detailData[0].processingstate] }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          </div>
        </el-form>
        <div slot="footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPollutantList,getWarnPsMonitoringList } from "./api";
import tabDate from '../../../components/viewComponents/tabDate/tabDate.vue'
export default {
  name: "EnterprisesHighWarningAlert",
  components: { tabDate },
  data() {
    return {
      queryParams: {
        segmentName:'',
        itemCode:"",
        dateRange:[],
        dateType:'0',
        warnType:["301",'302']
      },
      warnTypeList:[
        {label:"超标",value:"301"},
        {label:"恒值异常",value:"302"},
        {label:"零值异常",value:"303"},
        {label:"超小值异常",value:"304"},
      ],
      dateTypeTabs:[
        {value:'date',name:'按天'},
        {value:'month',name:'按月',},
        {value:'year',name:'按年'},
      ],
      processingstateMap:{
        "0":'未处理',
        "1":'处理中',
        "2":'已处理',
        "3":'已关闭'
      },
      pollutantList:[],
      tableData:[],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading:false,
      dialogVisible:false,
      detailData:[],
    };
  },
  computed:{
    apiParams(){
      // let beginTime,endTime,warnType;
      // if(this.queryParams.dateType==='0'){
      //   beginTime = this.queryParams.dateRange[0];
      //   endTime = this.queryParams.dateRange[1];
      // } else if(this.queryParams.dateType==='1'){
      //   beginTime = $moment(this.queryParams.dateRange[0]).format('{yyyy}-{mm}');
      //   endTime = $moment(this.queryParams.dateRange[1]).format('{yyyy}-{mm}');
      // } else if(this.queryParams.dateType==='2'){
      //   beginTime = $moment(this.queryParams.dateRange[0]).format('{yyyy}');
      //   endTime = $moment(this.queryParams.dateRange[1]).format('{yyyy}');
      // }
      let dateMap = {
        date: '0',
        month: '1',
        year: '2'
      }
      let dateRange = this.$refs.tabDateRef.getDateValue();
      let beginTime = dateRange[0], endTime = dateRange[1];
      let dateTab = this.$refs.tabDateRef.tabValue
      let dateType = dateMap[dateTab];
      let warnType = this.queryParams.warnType.join(',');

      return {
        beginTime,
        endTime,
        warnType,
        segmentName:this.queryParams.segmentName,
        itemCode:this.queryParams.itemCode,
        dateType:dateType,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }
    }
  },
  created() {
    let beginTime = $moment().offset('day',-7).format('{yyyy}-{mm}-{dd}');
    let endendTime = $moment().format('{yyyy}-{mm}-{dd}');
    this.queryParams.dateRange = [beginTime, endendTime];
    this.createFn()
  },
  methods: {
    async createFn(){
      await this.getPollutantListFn();
      this.getList();
    },
    getList(){
      this.loading  = true;
      return getWarnPsMonitoringList(this.apiParams).then(res =>{
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      })
    },
    getPollutantListFn(){
      return getPollutantList().then(res=>{
        this.pollutantList = res.data
        console.log(res)
      })
    },
    handleSearch() {
      // 模拟查询逻辑
      this.getList();
      // 这里可以调用 API 获取数据
    },
    dateTypeChange(val){
      let beginTime,endendTime;
      endendTime = $moment().format('{yyyy}-{mm}-{dd}');
      if(val == 0){
        beginTime = $moment().offset('week',-1).format('{yyyy}-{mm}-{dd}');
      } else if(val == 1){
        beginTime = $moment().offset('month',-1).format('{yyyy}-{mm}-{dd}');
      } else if(val == 2){
        beginTime = $moment().offset('year',-1).format('{yyyy}-{mm}-{dd}');
      }
      this.queryParams.dateRange = [beginTime, endendTime];

    },
    resetForm() {
      this.queryParams = {
        segmentName:'',
        itemCode:"",
        dateRange:[],
        dateType:'0',
        warnType:["301",'302']
      };
      let beginTime = $moment().offset('day',-7).format('{yyyy}-{mm}-{dd}');
      let endendTime = $moment().format('{yyyy}-{mm}-{dd}');
      this.queryParams.dateRange = [beginTime, endendTime];
      this.handleSearch();
    },
    exportData() {
      // 导出逻辑
      console.log("导出数据");
    },
    viewProcess(row) {
      // 查看流程逻辑
      this.detailData = [row];
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.handleSearch();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleSearch();
    }
  }
};
</script>

<style scoped>
.search-box {
  margin-bottom: 20px;
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-box {
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-box {
  margin-top: 20px;
}
</style>